<template>
	<view class="tab-course">
		<view class="tabs">
			<uv-tabs :list="tabList" lineColor="#F2CB29" lineWidth="16px" @click="clickTab" active-style="color: #F2CB29;" inactive-style="color: #BABAD8;"></uv-tabs>
		</view>
		<view class="tabs-content">
			<tab-course-cn v-if="selectedIndex == 0" />
			<tab-course-en v-if="selectedIndex == 1" />
		</view>
	</view>
</template>
<script setup>
	import { ref, defineComponent } from 'vue';
	import tabCourseCn from './tab-course-cn.vue';
	import tabCourseEn from './tab-course-en.vue';
	defineComponent({ tabCourseCn, tabCourseEn });
	const selectedIndex = ref(0);
	const tabList = ref([{ name: '中文' }, { name: '英文' }]);

	function clickTab(e) {
		selectedIndex.value = e.index;
	}
</script>
<style>
	.tab-course>>>.uv-tabs__wrapper__nav__item {
		cursor: pointer;
	}
	.tab-course>>>.uv-tabs__wrapper__nav__item__text {
		font-size: 16px;
	}
	.tab-course>>>.uv-tabs__wrapper__nav__line {
		border-radius: 0;
	}
</style>
<style scoped lang="scss">
	.tabs {
		height: 44px;
		background: rgba(56, 56, 69, .5);
	}
</style>